<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>

        <style>
            body {
                min-height: 200px
            }
        </style>
        <img src="img/cat.png" id="cat" style="position: absolute">
        <img src="img/hat.png" id="hat" style="position: absolute">

        <script>
            let cat = document.querySelector("#cat");
            let hat = document.querySelector("#hat");

            let angle = 0;
            let lastTime = null;
            function animate(time) {
                if (lastTime != null) angle += (time - lastTime) * 0.001;
                lastTime = time;
                cat.style.top = (Math.sin(angle) * 40 + 40) + "px";
                cat.style.left = (Math.cos(angle) * 200 + 230) + "px";

                // Your extensions here.

                requestAnimationFrame(animate);
            }
            requestAnimationFrame(animate);
        </script>

    </body>

</html>